<template>
    <div>
        <h3 style="color: aqua;">门店列表</h3>
        门店:<input type="text" v-model="quinfore.name">
        服务范围:<input type="text" v-model="quinfore.fuwu">
        <input type="button" value="查询" @click="getList">
        <br>
        <input type="button" value="添加" @click="add">
        <input type="button" value="批量删除" @click="delAll">
        <input
        type="button" value="批量启用" class="btn btn-info" @click="updateAllState(1)"
      />
      <input
        type="button" value="批量禁用" class="btn btn-warning" @click="updateAllState(0)"
      />
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="checked" @click="checkAll" />
                    </td>
                    <td>id</td>
                    <td>门店</td>
                    <td>地址</td>
                    <td>门店logo</td>
                    <td>服务范围</td>
                    <td>店主</td>
                    <td>联系电话</td>
                    <td>营业时间</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.id">
                    <td>
                        <input type="checkbox" v-model="ids" :value="item.id" @change="checkOne"/>
                    </td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.addres }}</td>
                    <td>
                        <img :src="item.log" height="100" width="100">
                    </td>
                    <td>{{ item.fuwu }}</td>
                    <td>{{ item.dianName }}</td>
                    <td>{{ item.phone }}</td>
                    <td>{{ item.create.substring(0,10) }}</td>
                    <td>{{ item.state=0?'启用':'禁用' }}</td>
                    <td>
                        <input type="button" value="删除" style="background-color: aqua;" @click="shan(item.id)">
                        <input type="button" value="修改" style="background-color: red;" @click="upd(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>共{{ data.totaCount }}条</span>
        &nbsp;
        <span v-for="item in data.totaPage" :key="item" @click="goPage(item)">{{
        item
      }}</span>
      <input type="button" value="首页" @click="goPage(1)" />
      <input
        type="button"
        value="下一页"
        @click="goPage(quinfore.pageIndex + 1)"
      />
    
    <select v-model="quinfore.pageSize" @change="show">
        <option :value="item" v-for="item in arr" :key="item">
          每页{{ item }}条
        </option>
      </select>
      <input
        type="button"
        value="上一页"
        @click="goPage(quinfore.pageIndex - 1)"
      />
      <input type="button" value="尾页" @click="goPage(data.totaPage)" />
      <input type="number" v-model="quinfore.pageIndex" />
      <input
        type="button"
        value="跳转"
        class="btn btn-warning"
        @click="goPage(quinfore.pageIndex)"
      />
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { it } from 'node:test';
import {reactive,ref,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
const router=useRouter();
let quinfore=reactive({
    pageIndex:1,
    pageSize:2,
    name:'',
    fuwu:''
})
let ids = ref([]);
let data: any = reactive({
  list: [], 
  totaCount: 0,
  totaPage: 0, 
});
onMounted(() => {
  getList();
});
const getList=()=>{
    axios({
        url:'https://localhost:7188/api/MenDian/Show',
        method:'get',
        params:quinfore
    })
    .then((res)=>{
        console.log(res);
        data.list=res.data.list;
        data.totaCount=res.data.totaCount;
        data.totaPage=res.data.totaPage;
    })
    .catch((err)=>{
        console.log(err);
    })
}
const updateAllState = (state: any) => {
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  let f = confirm('请问确定要修改状态吗？');
  if (f) {
    axios({
      url: 'https://localhost:7188/api/MenDian/UpdateStateAll',
      method: 'put',
      params: {
        ids: ids.value.toString(),
        state: state,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('修改成功');
          checked.value = false;
          ids.value = [];
          getList();
        } else {
          alert('修改失败');
          checked.value = false;
          ids.value = [];
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
let arr = ref([2, 4, 6, 8, 10]);

let checked = ref(false);
const show = () => {
  quinfore.pageIndex = 1;
  getList();
};
const goPage = (num: any) => {
  if (num < 1) {
    quinfore.pageIndex = 1;
    return;
  }

  if (num > data.totaPage) {
    quinfore.pageIndex = data.totaPage;
    return;
  }
  quinfore.pageIndex = num;
  getList();
};
const shan=(id:any)=>{
    let f = confirm('请问确定要删除吗？');
  if (f) {
    axios({
      url: 'https://localhost:7188/api/MenDian/Shan',
      method: 'delete',
      params: {
        id: id
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          checked.value = false; 
          getList();
        } else {
          alert('删除失败');
          checked.value = false;
          return;
        }
      })
    }
}
const add=()=>{
    router.push("/mendianadd");
}

const checkOne = () => {
  if (ids.value.length == data.list.length) {
     checked.value = true;
  } else {
    checked.value = false;
  }

};
const checkAll = () => {

  checked.value = !checked.value;

  if (checked.value === true) {
    ids.value = data.list.map((item: any) => {
      return item.id;
    });
  } else {
    ids.value = [];
  }
};

const upd=(id:any)=>{
    router.push({
    path:'/mendianupd',
    query:{
      id:id,
    }
  })
}


const delAll = () => {
  
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  let f = confirm('请问确定要删除吗？');
  if (f) {
    axios({
      url: 'https://localhost:7188/api/MenDian/DelAllmen',
      method: 'delete',
      params: {
        ids: ids.value.toString(),
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          checked.value = false; 
          getList();
        } else {
          alert('删除失败');
          checked.value = false;
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
</script>

<style scoped>

</style>